<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button style="margin-left: 8px">
          {{ $t("action.add") }}
          <a-icon type="plus" />
        </a-button>
        <!-- <template v-if="selectedRowKeys.length>0">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1"> <a-icon type="lock" />禁用</a-menu-item>
              <a-menu-item key="2"> <a-icon type="delete" />删除</a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 更多操作 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </template> -->
      </div>

      <s-table
        ref="table"
        size="default"
        :rowKey="(record) => record.group_id"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowSelection="{selectedRowKey:selectedRowKeys,onChange:onSelectChange}"
        :showPagination="false"
      >
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusText" />
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">{{ $t('action.editAuth') }}</a>
            <a-divider type="vertical" />
            <a style="color:rgba(255,0,0,.9)" @click="handleSub(record)">{{ $t('action.disable') }}</a>
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getRole } from '@/api/member'

const columns = [
  {
    title: 'ID',
    dataIndex: 'group_id'
  },
  {
    title: '用户组名称',
    dataIndex: 'name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'error',
    text: '停用'
  },
  1: {
    status: 'success',
    text: '正常'
  }
}

export default {
  name: 'MemberManage',
  components: {
    STable,
    Ellipsis
  },
  data () {
    this.columns = columns
    return {
      selectedRowKeys: [],
      selectedRows: [],
      queryParam: {},
      loadData: () => {
        return getRole()
        .then(res => {
          return res.result
        })
      }
    }
  },
  filters: {
    statusText: function (value) {
      return statusMap[value].text
    },
    statusTypeFilter: value => {
      return statusMap[value].status
    }
  },
  methods: {
    handleAdd () {},
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }
}
</script>
